import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import {useEffect, useMemo, useState} from "react"
import classNames from "classnames"
import dayjs from "dayjs"
import { useSelector } from "react-redux"
import _ from "lodash"
import DailyBill from "@/pages/Month/component/DayBill/index.jsx";

const Month = () => {
    // 按月做数据分组
    const billList = useSelector(state => state.bill.billList)
    const monthGroup = useMemo(() => {
        return _.groupBy(billList, (item) => dayjs(item.date).format('YYYY-MM'))
    }, [billList]);

    // 控制弹窗打开
    const [show, setShow] = useState(false)

    // 控制时间显示
    const [currentDate, setCurrentDate] = useState(() => {
        return dayjs(new Date()).format('YYYY-MM')
    })

    // 当前月份的账单数据
    const [currentMonthList, setCurrentMonthList] = useState([])
    const result = useMemo(() => {
        const pay = currentMonthList.filter(item => item.type === 'pay').reduce((total, i) => total + i.money, 0)
        const income = currentMonthList.filter(item => item.type === 'income').reduce((total, i) => total + i.money, 0)
        return {
            pay,
            income,
            balance: income + pay
        }
    }, [currentMonthList]);
    const onConfirm = (date) => {
        setShow(false)
        const formatDate = dayjs(date).format('YYYY-MM')
        setCurrentMonthList(monthGroup[formatDate] || [])
        setCurrentDate(formatDate)
    }

    // 初始化显示当前月份的账单数据
    useEffect(() => {
        const date = dayjs().format('YYYY-MM')
        setCurrentMonthList(monthGroup[date] || [])
    }, [monthGroup])

    // 按日期分组
    const dayGroup = useMemo(() => {
        const dayGroupData = _.groupBy(currentMonthList, (item) => dayjs(item.date).format('YYYY-MM-DD'))
        const keys = Object.keys(dayGroupData)

        return {
            dayGroupData,
            keys
        }
    }, [currentMonthList]);

    return (
        <div className="monthlyBill">
            <NavBar className="nav" backArrow={false}>
                月度收支
            </NavBar>
            <div className="content">
                <div className="header">
                    {/* 时间切换区域 */}
                    <div className="date" onClick={() => setShow(true)}>
            <span className="text">
             {currentDate + ''}月账单
            </span>
                        <span className={classNames('arrow', show && 'expand')}></span>
                    </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className="item">
                            <span className="money">{result.pay.toFixed(2)}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{result.income.toFixed(2)}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{result.balance.toFixed(2)}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                    {/* 时间选择器 */}
                    <DatePicker
                        className="kaDate"
                        title="记账日期"
                        precision="month"
                        onCancel={() => setShow(false)}
                        onConfirm={onConfirm}
                        onClose={() => setShow(false)}
                        visible={show}
                        max={new Date()}
                    />
                </div>

                {
                    dayGroup.keys.map(key => {
                        return <DailyBill date={key} key={key} billList={dayGroup.dayGroupData[key]} />
                    })
                }

            </div>
        </div >
    )
}

export default Month
